<template>
    <div class="student-info-container">
      <el-row class="student-info-header">
        <el-col :span="24">
          <h2>学生基本信息</h2>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">学号:</span>
          <span class="value">{{ student.studentId }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">姓名:</span>
          <span class="value">{{ student.name }}</span>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">入学时间:</span>
          <span class="value">{{ student.enrollmentYear }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">年级:</span>
          <span class="value">{{ student.grade }}</span>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">专业:</span>
          <span class="value">{{ student.department }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">联系方式:</span>
          <span class="value">{{ student.contactInfo }}</span>
        </el-col>
      </el-row>
  
      <!-- 添加额外的空白行以增加间隔 -->
      <el-row>
        <el-col :span="24">
          <div style="height: 100px;"></div>
        </el-col>
      </el-row>
  
      <!-- 学生成绩信息 -->
      <el-row class="student-info-header">
        <el-col :span="24">
          <h2>学生成绩信息</h2>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">学业成绩:</span>
          <span class="value">{{ score.acScore }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">学位课数量:</span>
          <span class="value">{{ score.acCount }}</span>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">思政表现分:</span>
          <span class="value">{{ score.ideologyScore }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">科研能力分:</span>
          <span class="value">{{ score.creatScore }}</span>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">社会服务分:</span>
          <span class="value">{{ score.serScore }}</span>
        </el-col>
        <el-col :span="12" class="info-item">
          <span class="label">社会附加分:</span>
          <span class="value">{{ score.researchAbilityScore }}</span>
        </el-col>
      </el-row>
      <el-row class="student-info-content">
        <el-col :span="12" class="info-item">
          <span class="label">加权总成绩:</span>
          <span class="value">{{ score.total }}</span>
        </el-col>
      </el-row>
      <el-row class="button-row">
      <el-col :span="24">
        <el-button type="primary" @click="showScoringDetails">查看评分细则</el-button>
      </el-col>
    </el-row>

    <!-- 评分细则模态框 -->
    <el-dialog title="评分细则" :visible.sync="scoringDetailsVisible" width="50%" top="200px">
      <div v-if="rules" style="font-size: 18px; line-height: 2;">
      <p>入学年份:{{ student.enrollmentYear }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年级:{{ student.grade }}&nbsp;&nbsp;&nbsp;评分细则如下：</p>
      <p>发布年份:</p>
      <p>{{ rules.year }}</p>
      <p>评定年级:</p>
      <p>{{ rules.grade }}</p>
      <p>说明:</p>
      <p>{{ rules.description }}</p>
    </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
import request from '../../utils/request';

  export default {
    created(){
        this.load()
    },
    data() {
      return {
        scoringDetailsVisible: false,
      
        student: {
          studentId: '123456',
          name: '张三',
          enrollmentYear: '2020-09-01',
          grade: '大二',
          department: '计算机科学与技术',
          contactInfo: '13800138000',
         
        },
        score: {
          acScore: '',
          acCount: '',
          ideologyScore: '',
          creatScore: '',
          serScore: '',
          fujScore: '',
        },
        rules: {
          year: '',
          grade: '',
          description: '',
        }

      };
    },
    methods:{
      load(){
        request.get("/students/message").then(res =>{
          console.log(res)
          this.score = res.data.score
          this.student = res.data.student
          this.rules = res.data.rules
          if(res.data.code === 401){
            this.$message.error({
              
              message: res.data.msg,
              
             })
             this.$router.push("/slogin")
          }
        
        })
      },
      showScoringDetails(){
        this.scoringDetailsVisible = true
      }
    }
  };
  </script>
  
  <style scoped>
  .student-info-container {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .student-info-header {
    margin-bottom: 20px;
  }
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .label {
    font-weight: bold;
    margin-right: 10px;
  }
  .value {
    color: #333;
  }
  .button-row {
  margin-top: 20px;
  text-align: center;
}
  </style>